<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客列表</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/blog_list.css">
    <script src="js/jquery.min.js"></script>
    <script src="editor.md/editormd.js"></script>
    <script src="editor.md/lib/marked.min.js"></script>
    <script src="editor.md/lib/prettify.min.js"></script>
    <link rel="stylesheet" href="editor.md/css/editormd.preview.min.css" />
</head>

<body>
    <!-- 这是导航栏 -->
    <div class="nav">
        <img src="image/logo.png" alt="logo">
        <span class="head">我的博客系统</span>
        <!-- 空白元素, 用来占位置 -->
        <span class="spacer">欢迎来到知识海洋</span>
        <a href="#" id="logout" class="logout">退出</a>
        <a href="blog_register.html">注册</a>
    </div>
    <!-- 这里的 .container 作为页面的版心 -->
    <div class="container">
        <!-- 左侧个人信息 -->
        <div class="left">
            <!-- 表示整个用户信息区域. -->
            <div class="card">
                <img src="" alt="我的头像" id="myphoto">
                <h3></h3>
                <div class="counter">
                    <a target="_blank" id="git">我的Gitee</a>
                </div>
                <h6></h6>
                <div class="counter">
                    <a href="user_update.html">修改个人资料</a>
                </div>
            </div>
        </div>
        <!-- 右侧内容详情 -->
        <div class="right">
<!--            <select id="rankQuery">-->
<!--                <option selected="selected">排行榜</option>-->
<!--                <option>访问量排行榜</option>-->
<!--                <option>获赞量排行榜</option>-->
<!--                <option>最新发布(默认)</option>-->
<!--            </select>-->
        </div>
    </div>
    </div>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        //进行退出登录操作
        let logoutD = document.querySelector(".logout");
        logoutD.onclick = function () {
            jQuery.getJSON("login/out", {},
                function (data) {
                    if (data.status == 1) {
                        alert(data.message);
                        window.location.href = 'blog_login.html'
                    }
                }
            )
        }

        //处理关键词查询请求
        let querytext = document.createElement("input");
        querytext.type = "text";
        querytext.id = "queryWord";
        querytext.placeholder = "请输入查询关键字";
        querytext.className = "search";
        let subbutton = document.createElement("input");
        subbutton.type = "button";
        subbutton.value = "查 询";
        subbutton.id = "query";
        subbutton.className = "sub";
        let rankQuery = document.createElement("select");
        rankQuery.id = "rankQuery";
        rankQuery.options.add(new Option("展示规则（默认最新发布）"))
        rankQuery.options.add(new Option("访问量递降展示"));
        rankQuery.options.add(new Option("获赞量递降展示"));
        // rankQuery.options.item(3).selected;

        // 使用ajax请求，向服务器获取当前用户的登录状态
        jQuery.getJSON("home/myMse", {},
            function (obj) {
                if (obj.status == 1) {
                    buildUser(obj.data);
                } else if (obj.status == -1) {
                    alert(obj.message);
                    window.location.href = 'user_update.html';
                }
            }
        )



        function buildUser(user) {
            //根据服务器返回的用户信息，来修改页面的显示内容
            let h3 = document.querySelector('.card>h3');
            h3.innerHTML = user.username;
            let h6 = document.querySelector('.card>h6');
            h6.innerHTML = user.signature;
            let gitee = document.querySelector('#git');
            gitee.href = user.gitee;
            console.log(user.img);
            let photo = document.querySelector('#myphoto');
            photo.src = user.img;
            if (user.identity == 0) {
                //如果是用户身份登录
                // 创建用户信息栏标签
                let addArticle = document.createElement("a");
                addArticle.type = "a";
                addArticle.id = "addArticle";
                addArticle.innerHTML = "发布文章";
                addArticle.className = "counter";
                addArticle.href = "blog_edit.html";
                let leftDiv = document.querySelector('.container .left .card');
                leftDiv.appendChild(addArticle);
                let article = document.createElement("a");
                article.className = "counter";
                article.innerHTML = "已发布：" + user.published;
                article.href = 'blog_article.html?status=1';
                leftDiv.appendChild(article);
                let article2 = document.createElement("a");
                article2.className = "counter";
                article2.innerHTML = "待审核：" + user.examine;
                article2.href = 'blog_article.html?status=0';
                leftDiv.appendChild(article2);
                let article3 = document.createElement("a");
                article3.className = "counter";
                article3.innerHTML = "审核不通过：" + user.fail;
                article3.href = 'blog_article.html?status=2';
                leftDiv.appendChild(article3);
            } else if ((user.identity == 1 || user.identity == 2)) {
                // 如果是管理员身份登录
                let leftDiv = document.querySelector('.container .left .card');
                let manageUser = document.createElement("a");
                manageUser.type = "a";
                manageUser.id = "manageUser";
                manageUser.innerHTML = "管理用户";
                manageUser.className = "counter";
                manageUser.href = "manage_user.html";
                leftDiv.appendChild(manageUser);
                let sensitiveWord = document.createElement("a");
                sensitiveWord.type = "a";
                sensitiveWord.id = "sensitiveWord";
                sensitiveWord.innerHTML = "管理敏感词";
                sensitiveWord.className = "counter";
                sensitiveWord.href = "manage_sensitiveWord.html";
                leftDiv.appendChild(sensitiveWord);
                let article2 = document.createElement("a");
                article2.className = "counter";
                article2.innerHTML = "待审核：" + user.examineSum;
                article2.href = 'blog_article.html?status=0';
                leftDiv.appendChild(article2);
                let article3 = document.createElement("a");
                article3.className = "counter";
                article3.innerHTML = "审核不通过：" + user.failSum;
                article3.href = 'blog_article.html?status=2';
                leftDiv.appendChild(article3);
            }
        }

        //根据响应中的body数据构造HTML内容
        function buildBlogs(blogs) {
            let rightDiv = document.querySelector('.container .right');
            rightDiv.appendChild(querytext);
            rightDiv.appendChild(subbutton);
            rightDiv.appendChild(rankQuery);
            //遍历blogs，根据每个遍历的结果，构造出一个html片段，并且添加到页面中
            for (let blog of blogs) {
                //blog就是一个json对象，里面的内容就和服务器响应的json是匹配的
                //创建出div.blog
                let blogDiv = document.createElement("div");
                blogDiv.className = 'blog';
                //创建出div.title
                let titleDiv = document.createElement("div");
                titleDiv.className = 'title';
                titleDiv.innerHTML = blog.title;
                blogDiv.appendChild(titleDiv);
                //创建出div.date
                let dateDiv = document.createElement("div");
                dateDiv.className = 'date';
                //此处postTime是一个毫秒时间戳，而我们实际需要的是一个格式化日期
                dateDiv.innerHTML = blog.postTime;
                blogDiv.appendChild(dateDiv);
                //创建出div.desc（正文）
                let descDiv = document.createElement("div");
                descDiv.className = 'desc';
                descDiv.innerHTML = blog.content;
                blogDiv.appendChild(descDiv);
                //创建出div.mess
                let messDiv = document.createElement("div");
                messDiv.className = 'mess';
                //创建出阅读量span
                let readDiv = document.createElement('Div');
                readDiv.className = 'read';
                readDiv.innerHTML = '阅读量:' + blog.consult;
                messDiv.appendChild(readDiv);
                //创建出获赞量span
                let praiseDiv = document.createElement("Div");
                praiseDiv.className = 'good';
                praiseDiv.innerHTML = '获赞量:' + blog.praise;
                messDiv.appendChild(praiseDiv);
                blogDiv.appendChild(messDiv);
                //创建出a.detail（博客详情链接)
                let detailA = document.createElement("a");
                detailA.className = 'detail';
                detailA.innerHTML = '查看全文 &gt; &gt;';
                detailA.href = 'blog,_detail.html?blogId=' + blog.id;
                blogDiv.appendChild(detailA);
                rightDiv.appendChild(blogDiv);
            }
            const select = document.getElementById("rankQuery");
            alert(select.value);
        }
        //提交查询请求
        subbutton.onclick = function () {
            //使用ajax请求，向服务器获取博客列表，按照时间降序排列
            jQuery.getJSON("home/queryBlogList", {
                    "word": jQuery.trim(querytext.value),
                    "queryRules": jQuery.trim(rankQuery.value)
                },
                function (obj) {
                    if (obj.status == 0) {
                        alert(obj.message)
                        location.reload(false);
                    } else if (obj.status == -1) {
                        alert("很抱歉未能查询到与你所输入的关键字相关的文章~")
                        location.reload(false);
                    } else {
                        removeChild();
                        buildBlogs(obj.data);
                    }
                }
            )
        }

        function removeChild() {
            let child = document.getElementsByClassName("blog");
            child.removeNode = [];
            if (child.length != undefined) {
                var len = child.length;
                for (var i = 0; i < len; i++) {
                    child.removeNode.push({
                        parent: child[i].parentNode,
                        inner: child[i].outerHTML,
                        next: child[i].nextSibling
                    });
                }
                for (var i = 0; i < len; i++) {
                    child[0].parentNode.removeChild(child[0]);
                }
            } else {
                child.removeNode.push({
                    parent: child.parentNode,
                    inner: child.outerHTML,
                    next: child.nextSibling
                });
                child.parentNode.removeChild(child);
            }
        }
    </script>
</body>

</html>